UI_panel_playback = function(estado){
	
	var _ESTADO = estado;
	
	this.init = function(){
	$("#btnCerrarTiposAnimacion").click(function(event){
		// $("#inputInicio").val();
		 $( "#tiposAnim" ).hide();
		 $("#btnAbrirTiposAnimacion").show();
		 COOKIE_CONTROLLER.saveValue('MOSTRAR_TIPOS_ANIMACION_AL_INICIO',false);
	});
	
	$("#btnAbrirTiposAnimacion").click(function(event){
		// $("#inputInicio").val();
//		$( "#tiposAnim" ).show('clip',{},1000);	
		$( "#tiposAnim" ).show();	
		 $("#btnAbrirTiposAnimacion").hide();
		 COOKIE_CONTROLLER.saveValue('MOSTRAR_TIPOS_ANIMACION_AL_INICIO',true);
	});
	
	
	if(CONSTANTS.MOSTRAR_TIPOS_ANIMACION_AL_INICIO){		
		$( "#tiposAnim" ).show();	
		 $("#btnAbrirTiposAnimacion").hide();
	}else{
		 $( "#tiposAnim" ).hide();
		 $("#btnAbrirTiposAnimacion").show();
	}
	
	if(CONSTANTS.MOSTRAR_PANEL_ANIMACION_AL_INICIO){		
		$("#btnAbrirPanelAnimacion").hide();
		$("#divAnimacion").show();
	}else{
		$("#btnAbrirPanelAnimacion").show();
		$("#divAnimacion").hide();
	}
	
	///en header
	$("#btnAbrirPanelAnimacion").click(function(event){
		$("#divAnimacion").show();
		$(this).hide();
		
		COOKIE_CONTROLLER.saveValue('MOSTRAR_PANEL_ANIMACION_AL_INICIO',true);
	});
	
	$("#btnCerrarPanelAnimacion").click(function(event){
		$("#divAnimacion").hide();
		$("#btnAbrirPanelAnimacion").show();
		
		COOKIE_CONTROLLER.saveValue('MOSTRAR_PANEL_ANIMACION_AL_INICIO',false);
	});
	
	
	$( "#divAnimacion" ).draggable({ cursor: 'pointer', /*containment: 'parent'*/ });

	
	$( "#playPause" ).button({
		text: false,
		icons: {primary: "ui-icon-play"}
	}).click(function(){	
		if(ANIMATOR.getAnimationState() == "playing"){
			ANIMATOR.pauseAnimation();
		}else{			
			ANIMATOR.playAnimation();
			//ANIMATOR.playAnimationFromKey();
		}			
	});
	
	$( "#stop" ).button({
		text: false,
		icons: {primary: "ui-icon-stop"}
	}).click(function(){ 
		ANIMATOR.stopAnimation();
	});
	
	
	
	 //---------------------RADIO BUTTONS
	 
	 //cargamos los radio buttons segun los tipos de animacion (definidos en dibujadorCamino.js)
	 var arr = estadoAnimacion.tiposAnimacion;
//	 var arr = ANIMATOR.getTiposAnimacion();
	 for (var i = 0, l = arr.length; i<l; i++){
		 r1 = $("<input />").attr({id: 'radio'+i, type: 'radio', name: 'tipoAnimacion',  value: arr[i].tipo});
		texto = arr[i].name; 
		 $("#divRadiosAnimacion").append(r1);
		 
		 var label = $('<label for="radio'+i+'">'+texto+'</label>');
		 $("#divRadiosAnimacion").append(label);
	 }	 
	
	//seleccionamos el radio button del tipo de animacion, segun el valor de la configuracion inicial
	$('input:radio[name=tipoAnimacion][value='+CONSTANTS.TIPO_ANIMACION_INICIAL+']:nth(0)').attr('checked',true);
	$( "#divRadiosAnimacion" ).buttonset();
	
	//el tooltip hay q asignarselo al label asociado al radio button
	$( "#divRadiosAnimacion label" ).each(function(index) {
	    $(this).attr("title",arr[index].desc);
	    //$(this).tooltip({predelay: 1000}); //TODO 7/03/12
	});
	
	
	$("input[name=tipoAnimacion]").change(function(){
		ANIMATOR.setTipoAnimacion($("input[name=tipoAnimacion]:checked").val());	  
	});
	
	////-----------
	
	
	};//fin funcion init
	
	this.init();
	
	//funcion para establecer los parametros al crearse una nueva animacion
	this.setUpUI = function(){
		
		//habilito botones para reproducir animacion
		$("#playPause").removeClass("ui-state-disabled");
		$("#stop").removeClass("ui-state-disabled");
		
		$("#playPause").button( "option" , "icons" , { primary: "ui-icon-play"});
	};
	
	this.disableButtons = function(){
		//deshabilito botones para reproducir animacion
		$("#playPause").addClass("ui-state-disabled");
		$("#stop").addClass("ui-state-disabled");
	};
	
	
	this.updatePlayPauseButton = function(){
		switch (_ESTADO.estado){
		
		case "playing":
			//$("#playPause").html();//TODO
			$("#playPause").button( "option" , "icons" , { primary: "ui-icon-pause"});
			break;
		case "paused":
		case "stopped":
			$("#playPause").button( "option" , "icons" , { primary: "ui-icon-play"});
			break;
		
		}
	};
	
};